/** @jsxImportSource @emotion/react */
import { jsx } from "@emotion/react";
import * as React from "react";
import { Button } from "../Button";
import { Tooltip } from "../Tooltip";
import { storiesOf } from "@storybook/react";
import { Touchable } from "../Touchable";
// import { useTouchable } from "../../../common-sei/principal/UiDebugSave/touchable-hook";
import { Sheet } from "../Sheet";
import { Spinner } from "../Spinner";
import {usePressable} from "../Hooks/pressable-hook";

function TouchableHighlight() {
  const [pressCount, setPressCount] = React.useState(0);

  function onPress() {
    console.log("Pressed!");
    setPressCount(pressCount + 1);
  }

  const { bind, active, hover } = usePressable({
    onPress,
    behavior: "link"
  });

  return (
    <div>
      {pressCount}
      <div
        role="button"
        tabIndex={0}
        {...bind}
        css={{
          border: hover ? "1px solid black" : "1px solid transparent",
          userSelect: "none",
          outline: "none",
          background: active ? "#08e" : "transparent"
        }}
      >
        This is a touchable highlight
      </div>
    </div>
  );
}

export const TouchableStories = storiesOf("Spinner", module)
  .add("basic", () => {
    return (
      <div>
          <div css={{ padding: "100px" }}>
            <TouchableHighlight />
            <p>
              同步模式，转圈圈时间内，整个页面都被屏蔽.
            </p>
          </div>
          <Spinner label={'努力中'}  doing/>
      </div>
    );
  })
 ;

